import React, { Component } from 'react';
import { TodoActions } from '../../actions/todoActions';

class TodoHeader extends Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onAdd = this.onAdd.bind(this);
        this.state = {
            text: '',
            editing: false,
        };
    }
    onChange(event) {
        this.setState({
            text: event.target.value,
        });
    }
    onAdd() {
        console.log(this.state.text);
        TodoActions.addTodo(this.state.text);
        this.setState({
            text: '',
        });
    }
    render() {
        return (
            <div>
                <h1>TodoFlux</h1>
                <div>
                    <input 
                      value = {this.state.text} 
                      type = 'text' 
                      placeholder = "请输入待办事项" 
                      onChange = {this.onChange} 
                    />
                    <button onClick = {this.onAdd}>
                        发送
                    </button>
                </div>
            </div>
        );
    }
}

export default TodoHeader;


